<template>
    <div class="mui-content shopCar" :style="{height: orderHight+'px'}">
        <div v-if="!flag">
            <div class="mui-card" v-for="item in carInfo" :key="item.id">
                <div class="mui-card-content">
                    <div class="mui-card-content-inner">
                        <mt-cell-swipe
                            :right="[
                                {
                                content: '删除',
                                style: { background: 'red', color: '#fff' },
                                handler: () =>  deleteSection(item.id)
                                }
                            ]">
                            <div class="mui-input-row mui-checkbox mui-left">
                                <input name="checkbox" type="checkbox" :checked="item.select" @click="selectSection(item.id)">
                            </div>
                            <div class="imgBox"><img :src="item.pic" alt=""></div>
                            <div class="shop-info">
                                <h3>{{ item.name }}</h3>
                                <p>￥{{ item.price }}</p>
                                <car-numbox :shopId="item.id"></car-numbox>
                            </div>
                        </mt-cell-swipe>
                    </div>
                </div>
            </div>
            <div class="btns">
                <!-- <mt-checklist title="全选"></mt-checklist> -->
                <div class="mui-input-row mui-checkbox mui-left">
                    <label>全选</label>
                    <input name="checkbox" value="全选" type="checkbox" :checked="$store.getters.allSelect" @click="selectAll">
                </div>
                <div class="btns-r">
                    <p>合计: <span>￥{{ $store.getters.totlePrice }}</span></p>
                    <mt-button type="primary">结算</mt-button>
                </div>
            </div>
        </div>
        <div class="empty-car" v-else>
            <img src="../../assets/empty-car.gif" alt="">
            <p>您的购物车空空哦~<br>去看看心仪的商品吧~</p>
            <router-link to="/home/goodslist" class="toShop">立即去购物</router-link>
        </div>
    </div>
</template>

<script>
    import carNumbox from '../subcomponents/carNumbox.vue'
    export default {
        data() {
            return {
                carInfo: this.$store.state.carInfo,
                orderHight: 0,
                flag: this.$store.getters.allNum==0?true:false
            }
        },
        created() {
            this.orderHight = (document.documentElement.clientHeight || document.body.clientHeight)-105;
        },
        components: {
            carNumbox
        },
        methods: {
            // 删除对应的商品
            deleteSection(id) {
                this.$store.commit('deleteCarInfo',id)
            },
            // 选择对应商品
            selectSection(id) {
                this.$store.commit('selectCarInfo',id)
            },
            // 全选
            selectAll() {
                this.$store.commit('selectAll')
            }
        },
        watch: {
            "$store.getters.allNum": function(newVal) {
                newVal == 0?this.flag = true:this.flag = false
            }
        },
    }
</script>

<style lang="scss">
.shopCar{
    background-color: #fff!important;
    padding-bottom: 60px;
    position: relative;
    .mui-card-content-inner{
        padding: 10px 0;
        .mint-cell{
            width: 100%;
            background: #fff;
            .mint-cell-wrapper{
                background: #fff;
            }
            .mui-input-row{
                width: 12%;
                height: 100px;
                input{
                    left: 0px;
                    top: 35px
                }
            }
            .imgBox{
                width: 30%;
                height: 100px;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .shop-info{
                width: 50%;
                margin-left: 20px;
                height: 100px;
                display: flex;
                justify-content: space-between;
                flex-direction: column;
                h3{
                    font-size: 15px;
                    color: #000;
                    height: 36px;
                    line-height: 18px;
                    font-weight: normal;
                    overflow: hidden;
                }
                p{
                    color: #f00;
                    font-weight: bold;
                    margin-top: 10px;
                }
            }
        }
    }
    .btns{
        position: absolute;
        left: 0;
        bottom: 0px;
        z-index: 999;
        width: 100%;
        height: 50px;
        background-color: #fff; 
        display: flex;
        justify-content: space-between; 
        border-top: 1px solid #eee; 
        .mui-input-row{
            label{
                padding:  18px 15px 16px 58px;
                font-size: 14px;
            }
            input{
                top: 10px;
            }
        }
        .btns-r{
            width: 60%;
            display: flex;
            justify-content: flex-end;
            padding-right: 20px;
            p{
                line-height: 50px;
                margin-right: 15px;
                font-size: 14px;
                span{
                    color: #f00
                }
            }
            .mint-button{
                height: 30px;
                margin-top: 10px;
                font-size: 16px;
            }
        }    
    }
    .empty-car{
        position: absolute;
        left: 0;
        right: 0;
        margin: 0 auto;
        top: 50%;
        margin-top: -105px;
        height: 210px;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        overflow: hidden;
        img{
            width: auto;
            height:100px;
            display: block;
            margin: 0 auto;
        }
        p{
            height: 50px;
            line-height: 20px;
            font-weight: bold;
            text-align: center;
            margin-top: 20px;
            margin-bottom: 0;
        }
        .toShop{
            display: block;
            width: 100px;
            height: 30px;
            line-height: 30px;
            background: #26a2ff;
            border-radius: 5px;
            color: #fff;
            margin: 0 auto;
            text-align: center;
            font-size: 14px;
        }
    }
}
</style>